<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>燕归来兮 | 管理系统</title>
    <#include "common/link.ftl"/>
    <style>
        .media:hover {
            background-color: #EFEFEF;
        }

    </style>
</head>
<body>

<section class="hero is_blue is-medium">
    <!-- Hero head: will stick at the top -->
    <div class="hero-head">
        <#include "common/nav.ftl"/>
    </div>

    <!-- Hero content: will be in the middle -->
    <div class="hero-body">
        <div class="container has-text-centered">
            <p class="title is-size-1 mb-6">
                管理系统
            </p>
            <p class="subtitle">
                凡心之所向,素履以往,生如逆旅,一苇以航
            </p>
        </div>
    </div>

    <!-- Hero footer: will stick at the bottom -->
    <div class="hero-foot">
    </div>
</section>


<#-- 文章列表 -->
<div class="is-flex is-flex-direction-column is-justify-content-center ">

    <div class="width-20p field mt-4">
        <div class="control has-icons-left has-icons-right">
            <input class="input" type="text" id="nameInput">
            <span class="icon is-small is-left">
                <i class="fas fa-user"></i>
             </span>
            <span class="icon is-small is-right">
                <i class="fas fa-check"></i>
            </span>
        </div>
    </div>

    <div class="width-20p field">
        <div class="control has-icons-left has-icons-right">
            <input class="input is-danger" type="password" id="psInput">
            <span class="icon is-small is-left">
                <i class="fas fa-envelope"></i>
            </span>
            <span class="icon is-small is-right">
                <i class="fas fa-exclamation-triangle"></i>
            </span>
        </div>
    </div>

    <div class="width-20p field is-grouped">
        <div class="control">
            <button class="button is-link" onclick="login()">登录</button>
        </div>
        <div class="control">
            <button class="button is-link is-light">重置</button>
        </div>
    </div>


    <div class="modal" id="loginResultModal">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">错误提示</p>
                <button class="delete" aria-label="close" onclick="showLoginErrorMsg(false)"></button>
            </header>
            <section class="modal-card-body">
                登录失败，请检查账号密码后重试
            </section>
            <footer class="modal-card-foot is-flex is-justify-content-flex-end">
                <button class="button" onclick="showLoginErrorMsg(false)">确定</button>
            </footer>
        </div>
    </div>
</div>

<#-- 尾部 -->
<#include "common/footer.ftl"/>
<script src="/layuimini/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script>
    function login() {
        let login = {
            username: $("#nameInput").val(),
            password: $("#psInput").val()
        }
        $.post({
            url: "/api/auth/login",
            data: JSON.stringify(login), //方法二   测试ok
            dataType: "json",
            contentType: 'application/json',
            success: function (result) {
                let {code} = result
                if (code === 0) {
                    window.location.href = '/admin/index'
                } else {
                    showLoginErrorMsg(true)
                }
            }
        });
    }

    function showLoginErrorMsg(show) {
        let resultModal = $("#loginResultModal");
        if (show) {
            resultModal.addClass("is-active")
        } else {
            resultModal.removeClass("is-active")
        }
    }
</script>
</body>
</html>